<template>
  <van-tabbar route active-color="red" inactive-color="black">
    <van-tabbar-item to="/">
      <van-icon name="wap-home-o" size="0.55rem" />
      <span>首页</span>
    </van-tabbar-item>
    <van-tabbar-item to="/category">
      <van-icon name="apps-o" size="0.55rem" />
      <span>分类</span>
    </van-tabbar-item>
    <van-tabbar-item to="/cart">
      <van-icon name="cart-o" size="0.55rem" />
      <span>购物车</span>
    </van-tabbar-item>
    <van-tabbar-item to="/my">
      <van-icon name="user-o" size="0.55rem" />
      <span>我的</span>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>
export default {};
</script>

<style scoped lang="less">
.van-tabbar {
  height: 1.5rem;
  border-top: 1px solid rgb(200, 200, 200);
  z-index: 5;
  .van-tabbar-item__text {
    display: flex;
    align-items: center;
    span {
      font-size: 0.5rem;
      vertical-align: bottom;
    }
    .van-icon {
      vertical-align: bottom;
    }
  }
}
</style>